<script setup>

import {ref} from "vue";

const userList = ref([]);

const getUserList = () => {
  userList.value = [
    {
      id: 1,
      username: '用户1',
      nickname: 'Imooc 用户 1',
      phone: '15588888881',
    },
    {
      id: 2,
      username: '用户2',
      nickname: 'Imooc 用户 2',
      phone: '15588888882',
    },
    {
      id: 3,
      username: '用户3',
      nickname: 'Imooc 用户 3',
      phone: '15588888883',
    },
    {
      id: 4,
      username: '用户4',
      nickname: 'Imooc 用户 4',
      phone: '15588888884',
    },
    {
      id: 5,
      username: '用户5',
      nickname: 'Imooc 用户 5',
      phone: '15588888885',
    },
    {
      id: 6,
      username: '用户6',
      nickname: 'Imooc 用户 6',
      phone: '15588888886',
    },
    {
      id: 7,
      username: '用户7',
      nickname: 'Imooc 用户 7',
      phone: '15588888887',
    },
    {
      id: 8,
      username: '用户8',
      nickname: 'Imooc 用户 8',
      phone: '15588888888',
    },
    {
      id: 9,
      username: '用户9',
      nickname: 'Imooc 用户 9',
      phone: '15588888888',
    }
  ]
}

getUserList();
import Nav from "@/components/Nav.vue";
import * as xlsx from 'xlsx'

const importExcel = () => {
  // 弹出文件选择对话框
  tools.ipcInvoke('getFile', {
    title: '请选择一个Excel文件',
    // defaultPath:"",
    buttonLabel: "确认选择",
    filters: [
      {
        name: 'Excel 文件',
        extensions: ['xls', 'xlsx']
      },
    ],
    properties: [
      'openFile'
    ]
  }).then(res => {
    if (res.canceled) {
      return;
    }
    let filePath = res.filePaths[0];
    tools.ipcInvoke('readSystemFile', filePath, '').then(({err, data}) => {

      if (err !== null) {
        console.log('文件读取错误');
        return;
      }
      // data =>
      // console.log(data)
      try {
        const excel = xlsx.read(data, {
          type: 'array'
        })
        const sheetName = excel.SheetNames[0];
        const workSheet = excel.Sheets[sheetName]
        const importData = xlsx.utils.sheet_to_json(workSheet, {
          header: [
            "username",
            "nickname",
            "phone"
          ]
        })
        importData.splice(0, 1)
        sendToRequest(importData)

        userList.value.push(...importData)
      } catch {
        console.log('读取失败')
      }
    })


  })
  // 解析Excel文件
  // {username:xxx,nickname:xxx,phone:222}
  // {username:xxx,nickname:xxx,phone:222}
  // {username:xxx,nickname:xxx,phone:222}
  // {username:xxx,nickname:xxx,phone:222}
  // {username:xxx,nickname:xxx,phone:222}
  // {username:xxx,nickname:xxx,phone:222}

  // ['username','nickname','phone']
  // [用户1,imooc用户1,18888886666]
  // [用户1,imooc用户1,18888886666]
  // [用户1,imooc用户1,18888886666]
  // [用户1,imooc用户1,18888886666]
  // [用户1,imooc用户1,18888886666]
  // [用户1,imooc用户1,18888886666]
  // [用户1,imooc用户1,18888886666]
  // [用户1,imooc用户1,18888886666]
  // [用户1,imooc用户1,18888886666]

  // 解析后的数据加入的表格中
}

import {dataCompress, dataUnCompress} from "@/library/data.js";

import CryptoJs from 'crypto-js'

const sendToRequest = (data) => {

  // 123 => abc => xxxx
  // ****** xxxx =>  xxxx
  // xxxx => abc => 123

  // AES-256-CBC 对称加密算法 => phone
  // AES-256-ECB 对称加密算法 => phone
  // DES 对称加密算法 => phone
  // [{....,phone:xxxx}]

  // CryptoJs.AES.encrypt("xxxx","123")
  let secretKey = "imooc12138";

  let dataC = dataCompress(data, function (item) {
    item.phone = CryptoJs.AES.encrypt(item.phone + "", secretKey).toString();
    return item;
  });
  console.log(JSON.stringify(dataC).length);
}

const exportExcel = () => {
  // 1\ 选择我们导出路径
  // dialog.showSaveDialog()
  ///  设置我们的导出文件命名
  tools.ipcInvoke('saveFile', {
    title: '请选择保存文件的路径',
    defaultPath: "导出文件",
    buttonLabel: "确认保存",
    filters: [
      {
        name: 'Excel 文件',
        extensions: ['xlsx']
      },
    ],
  }).then(res => {
    if (res.canceled) {
      return;
    }
    let filePath = res.filePath;

    // 导出数据
    // Excel => [
    // [1，2，3]
    // [1，2，3]
    // [1，2，3]
    // [1，2，3]
    // [1，2，3]
    // ]
    let newArray = [];
    for (let item of userList.value) {
      let t = {...item}
      delete t.id
      newArray.push(Object.values(t))
    }
    // newArray
    // userList.value
    const workSheet = xlsx.utils.aoa_to_sheet([
      ["用户名", "昵称", "手机号"],
      ...newArray
    ])
    const workBook = xlsx.utils.book_new()
    xlsx.utils.book_append_sheet(workBook, workSheet)
    // workBook
    const ExcelData = xlsx.write(workBook, {
      type: "buffer"
    })
    tools.ipcInvoke('writeSystemFile', filePath, ExcelData, "").then(res => {
      if (res === null) {
        console.log("数据导出成功")
      } else {
        console.log("数据导出失败", res)
      }


    })


    console.log(newArray)

  })


}


</script>

<template>
  <div class="container">
    <Nav :index="1"/>
    <div class="container-box">
      <div class="card">
        <div class="operation">
          <div class="op-item add">添加</div>
          <div class="op-item import" @click="importExcel">导入</div>
          <div class="op-item export" @click="exportExcel">导出</div>
        </div>
        <div class="table-list">
          <table>
            <thead>
            <tr>
              <td>用户名</td>
              <td>昵称</td>
              <td>手机号</td>
              <td width="120">操作</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="list in userList">
              <td>{{ list.username }}</td>
              <td>{{ list.nickname }}</td>
              <td>{{ list.phone }}</td>
              <td>
                <a href="javascript:;">编辑</a>
                <a href="javascript:;">删除</a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  .container-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: calc(100vh - 68px);
    margin-top: 68px;
    background: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;

    .card {
      width: 1400px;
      height: 800px;
      background: #fff;
      border-radius: 10px;
      padding: 40px;
      display: flex;
      flex-direction: column;
    }
  }
}

.operation {
  display: flex;
  height: 38px;
  justify-content: right;

  .op-item {
    line-height: 38px;
    padding: 0 20px;
    font-size: 16px;
    background-color: #409EFF;
    border-radius: 5px;
    margin: 0 10px;
    color: #fff;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background-color: #65b0f9;
    }
  }

  .export {
    background-color: #E6A23C;

    &:hover {
      background-color: #fcc169;
    }
  }
}

.table-list {
  margin-top: 20px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #0003;
    border-radius: 10px;
    transition: all .2s ease-in-out;
  }

  &::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  table {
    width: 100%;
    max-height: 100%;
    border-collapse: collapse;

    td {
      font-size: 18px;
    }

    tr {
      line-height: 48px;
      height: 48px;
    }

    td {
      text-align: center;
      border: 1px solid #ebeef5;
    }

    thead {
      position: sticky;
      top: 0;
      background-color: #f5f7fa;
    }

    tbody {
      td {
        a {
          margin: 0 5px;
          color: #5b5b5b;

          &:hover {
            text-decoration: underline;
            color: var(--primary);
          }
        }
      }
    }
  }
}
</style>
